<script setup>
import {ref} from 'vue'
import {carouselListService, expressService} from "@/apis/news";
import {useRouter} from "vue-router";
import {ArrowLeft, ArrowRight} from "@element-plus/icons-vue";
import axios from "axios";

const carouselList = ref([])
const expressList = ref([])
const city = ref('广州')
const forecastList = ref({})
const canShowWeather = ref(false)

const router = useRouter()

const getCarouselList = async () => {
    let result = await carouselListService()
    carouselList.value = result.data
}

const getExpressList = async () => {
    let result = await expressService()
    expressList.value = result.data
}

getCarouselList()
getExpressList()

// 获取天气（有请求次数上限捏）
const searchWeather = () => {

    axios.get("http://www.tianqiapi.com/api?version=v1&appid=23035354&appsecret=8YvlPNrz&city=" + city.value)
        .then(res => {
            forecastList.value = res.data.data[1]
            canShowWeather.value = true
        })
        .catch(err => {
            console.log('天气查询失败')
        })
}

searchWeather()
</script>

<template>
    <div class="wrapper">
        <div class="adv">

            <!-- pic start -->
            <div class="pic fl" id="rotation">
                <el-carousel height="370px">
                    <el-carousel-item v-for="item in carouselList" :key="item.id">
                        <img :src="item.pic" alt="" @click="router.push(item.url)" style="cursor: pointer; max-width: 100%">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <!-- pic end -->

            <!-- news start -->
            <div class="new-books fr">
                <div class="news">
                    <div class="news-hd">
                        图书快报
                        <a href="#">更多<el-icon size="10px"><ArrowRight /></el-icon></a>
                    </div>
                    <div class="news-bd" id="book-news">
                        <ul>
                            <li v-for="item in expressList" :key="item.id"><a @click="router.push(item.url)"><el-icon size="10px"><ArrowLeft /></el-icon>{{ item.title }}</a></li>
                        </ul>
                    </div>
                </div>
                <div class="weather" id="weather">
                    <div class="uw">
                        <span>明日天气</span>
                    </div>

                    <div class="mw">
                        <input v-model="city" type="text" placeholder="请输入城市" @keyup.enter="searchWeather"/>
                        <button @click="searchWeather">查询</button>
                    </div>

                    <div class="dw" v-if="canShowWeather">
                        <div><b>{{ forecastList.wea }}</b></div>
                        <span>{{ forecastList.tem2 }}</span>~
                        <span>{{ forecastList.tem1 }}</span>
                        <p>{{ forecastList.date }}</p>
                    </div>
                    <div class="dw" v-else>
                        <span>天气查询失败</span>
                    </div>
                </div>
            </div>
            <!-- news end -->
        </div>
    </div>
</template>

<style scoped>
.adv {
    width: 980px;
    height: 370px;
    margin-left: 219px;
    margin-top: 10px;
}

.pic {
    position: relative;
    width: 700px;
    height: 370px;
    overflow: hidden;
    border-radius: 20px;
}

.arrow-l{
    position: absolute;
    top: 48%;
    left: 1%;
    z-index: 2;
    cursor: pointer;
}

.arrow-r{
    position: absolute;
    top: 48%;
    left: 96%;
    z-index: 2;
    cursor: pointer;
}

.pic ul li {
    float: left;
}

.new-books {
    width: 250px;
    height: 370px;
}

.news {
    height: 163px;
    border: 1px solid #b1191a;
    border-radius: 20px 20px 0 0;
}

.news-hd {
    height: 32px;
    border-bottom: 1px dotted #b1191a;
    padding: 0 15px;
    font-size: 14px;
    line-height: 32px;
}

.news-hd a {
    float: right;
    font-size: 12px;
    font-family: 'icomoon';
}

.news-bd {
    padding: 10px 0 0 15px;
    overflow: hidden;
}

.news-bd li {
    height: 23px;
}

.weather {
    position: relative;
    height: 200px;
    border: 1px solid #b1191a;
    border-top: none;
    border-radius: 0 0 20px 20px;
}

.weather .uw {
    text-align: center;
    margin-left: 20px;
    width: 200px;
    font-size: 20px;
    font-weight: 600;
    color: #b1191a;
}

.weather .mw {
    margin-top: 10px;
}

.weather input {
    float: left;
    margin-left: 10px;
    padding-left: 10px;
    border: 1px solid #b1191a;
    height: 25px;
    width: 165px;
    border-radius: 20px 0 0 20px;
}

.weather button {
    float: left;
    height: 27px;
    width: 50px;
    border: 0;
    padding-left: -5px;
    background-color: #b1191a;
    color: #fff;
    border-radius: 0px 20px 20px 0;
}

.weather .city {
    float: left;
    margin-left: 10px;
    font-size: 16px;
    color: black;
}

.weather .dw {
    width: 120px;
    position: absolute;
    top: 90px;
    left: 50%;
    margin-left: -60px;
    text-align: center;
    font-size: 20px;
    color: black;
}
</style>